<template>
	<view class="container">
		<view class="container-c">
			<form @submit="formSubmit">
			<view class="addressinfo">
				<text class="left">收件人</text>
				<input class="right" v-model="name" type="text" placeholder="请输入收件人姓名" name="name" />
			</view>
			<view class="addressinfo">
				<text class="left">电话号码</text>
				<input v-model="phoneNumber" class="right" type="text" placeholder="请输入收件人电话号码" name="phoneNumber" />
			</view>
			<view class="addressinfo">
				<text class="left">所在地区</text>
				<text class="right" v-if="showAddress==false" @tap="openAddress">请点击选择地址</text>
				<text v-else>{{addressInfo.label}}</text>
			</view>
			<view class="addressinfo">
				<text class="left">详细地址</text>
				<input class="right" type="text" v-model="detailAddress" placeholder="输入详细地址" value="" name="detailAddress" />
			</view>
			<view class="addressinfo switch">
				<text class="left">设为默认地址</text>
				<switch checked @change="switch1Change" color="rgb(53, 78, 68)" />
			</view>
			<button formType="submit" type="default" class="save" @tap="addAddress">
				保存地址
			</button>
			</form>
		</view>

		<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"
			themeColor="#007AFF"></simple-address>
	</view>
</template>

<script>
	import {
		findAllAddress,addAddressInfo
	} from "@/api/list/address/index.js"
	import simpleAddress from '@/components/simple-address/simple-address.vue';
	export default {
		data() {
			return {
				cityPickerValueDefault: [0, 0, 1],
				name: "",
				phoneNumber: "",
				detailAddress: "",
				showAddress: false,
				addressInfo:{}
			};
		},
		components: {
			simpleAddress
		},
		onLoad() {
		},
		methods: {
			onConfirm(e) {
				console.log(e)
				this.addressInfo=e;
				this.showAddress=true
			},
			// 提交表单
			formSubmit(e){
				// console.log(e)
				},
			openAddress() {
				this.$refs.simpleAddress.open()
			},
			switch1Change(e) {
				console.log()
			},
			addAddress() {
				var obj = {
					"city": this.addressInfo.labelArr[1],
					"cityCode": this.addressInfo.cityCode,
					"defaultStatus": 0,
					"detailAddress":this.detailAddress,						
					"name": this.name,
					"phoneNumber": this.phoneNumber,
					"postCode": "",
					"province": this.addressInfo.labelArr[0],
					"region": this.addressInfo.labelArr[2],
					"tag": ""
				}
				addAddressInfo(obj).then(res=>{
					console.log(res)
					uni.showToast({
						title:res.message
					})
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		background-color: #f1ece7;
		height: 100vh;
	}

	.container-c {
		width: 650rpx;
		margin: 0 auto;
	}

	.addressinfo {
		display: flex;
		align-items: center;
		height: 120rpx;
		line-height: 120rpx;
		border-bottom: 2rpx solid #ccc;
		font-size: 30rpx;
		color: #000;

		.left {
			width: 35%;
		}

		.right {
			width: 65%;
		}
	}

	.addressinfo.switch {
		display: flex;
		justify-content: space-between;
	}

	.save {
		width: 70%;
		height: 80rpx;
		border-radius: 80rpx;
		background-color: #354e44;
		color: #fff;
		line-height: 80rpx;
		text-align: center;
		font-size: 30rpx;
		margin: 500rpx auto;
	}
</style>
